<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("h3").click(function () {
                let u = this.nextSibling.nextSibling;
                // 如果当前菜单是隐藏的
                if ($(u).css("display") == "none") {
                    // 说明可能存在其他展开的菜单
                    // 因此,将所有菜单全部隐藏
                    $("ul").hide();
                    // 打开当前菜单
                    $(u).show();
                    return;
                }
                // 如果当前节点不是隐藏的,说明一定是显示的
                // 那么此时其他菜单一定是隐藏的
                // 只需要隐藏当前菜单即可
                $(u).hide();
            });
        })
    </script>
</head>
<body>
<!--
    三个列表中同一时间最多只有一个列表允许展开,可以全部隐藏
    当点击某一个列表时,如果该列表是隐藏的,则展开该列表,隐藏其他列表
    如果该列表是展开的,则隐藏该列表
-->
<h3>家用电器</h3>
<ul style="display: none;">
    <li>电视</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h3>电子产品</h3>
<ul style="display: none;">
    <li>手机</li>
    <li>pad</li>
    <li>电子表</li>
</ul>
<h3>学习用品</h3>
<ul style="display: none;">
    <li>笔记本</li>
    <li>签字笔</li>
    <li>钢笔</li>
</ul>

</body>
</html>